import { HtmlNode , HtmlNodeModel  } from "@logicflow/core";
import BaseNode from "./baseNode.vue";

class UserTaskModel extends HtmlNodeModel  {
setAttributes() {
    this.text.editable = false; // 禁止节点文本编辑
    // 设置节点宽高和锚点
    const width = 120;
    const height = 32;
    this.width = width;
    this.height = height;
    this.anchorsOffset = [
      [width / 2, 0],
      [0, height / 2],
      [-width / 2, 0],
      [0, -height / 2],
    ];
  }
}

class UserTaskView extends HtmlNode  {
  // 构建节点
  constructor(props) {
    super(props)
    this.root = document.createElement('div')
    this.vueComponent = BaseNode
  }
  // 设置到dom里面去
  setHtml(rootEl) {
    rootEl.appendChild(this.root)
    if (this.vm) {
      this.vm.$mount(this.root)
    } else {
      this.vm = new Vue({
        render: (h) =>
          h(this.vueComponent, {
            props: {
              model: this.props.model,
              graphModel: this.props.graphModel,
              disabled: this.props.graphModel.editConfigModel.isSilentMode,
              isSelected: this.props.model.isSelected,
              isHovered: this.props.model.isHovered,
              properties: this.props.model.getProperties()
            }
          })
      })
      this.vm.$mount(this.root)
    }
  }
}

export default {
  type: "UserTask",
  view: UserTaskView,
  model: UserTaskModel,
};
